<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语音转文本工具</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>语音转文本工具</h1>
            <p>点击麦克风按钮开始录音或上传音频文件，将语音转换为文本</p>
        </header>

        <main>
            <div class="tabs">
                <button class="tab-btn active" id="micTab">麦克风录音</button>
                <button class="tab-btn" id="fileTab">音频文件</button>
            </div>

            <div id="micSection" class="tab-content active">
                <div class="controls">
                    <button id="startBtn" class="btn">
                        <i class="fas fa-microphone"></i> 开始录音
                    </button>
                    <button id="stopBtn" class="btn" disabled>
                        <i class="fas fa-stop"></i> 停止录音
                    </button>
                    <div class="language-selector">
                        <label for="language">语言:</label>
                        <select id="language">
                            <option value="zh-CN" selected>中文 (简体)</option>
                            <option value="en-US">英语 (美国)</option>
                            <option value="ja-JP">日语</option>
                            <option value="ko-KR">韩语</option>
                            <option value="fr-FR">法语</option>
                            <option value="de-DE">德语</option>
                        </select>
                    </div>
                </div>

                <div class="status-indicator">
                    <div id="status">准备就绪</div>
                    <div class="recording-indicator" id="recordingIndicator">
                        <span class="dot"></span>
                        <span class="pulse"></span>
                    </div>
                </div>
            </div>

            <div id="fileSection" class="tab-content">
                <div class="file-upload-container">
                    <div class="file-upload-area" id="dropArea">
                        <i class="fas fa-cloud-upload-alt"></i>
                        <p>拖放音频文件到此处或</p>
                        <label for="audioFileInput" class="file-upload-btn">选择文件</label>
                        <input type="file" id="audioFileInput" accept="audio/*" hidden>
                        <p class="file-formats">支持格式: MP3, WAV, M4A, OGG, FLAC 等</p>
                    </div>
                    <div id="fileInfo" class="file-info hidden">
                        <div class="file-details">
                            <i class="fas fa-file-audio"></i>
                            <div>
                                <p id="fileName">未选择文件</p>
                                <p id="fileSize">0 KB</p>
                            </div>
                            <button id="clearFileBtn" class="action-btn" title="清除文件">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div class="audio-player">
                            <audio id="audioPlayer" controls></audio>
                        </div>
                        <button id="transcribeBtn" class="btn" disabled>
                            <i class="fas fa-language"></i> 开始转写
                        </button>
                        <p id="fileStatus" class="file-status"></p>
                    </div>
                </div>
            </div>

            <div class="transcript-container">
                <div class="transcript-header">
                    <h2>识别结果</h2>
                    <div class="transcript-actions">
                        <button id="copyBtn" class="action-btn" title="复制文本">
                            <i class="fas fa-copy"></i>
                        </button>
                        <button id="downloadBtn" class="action-btn" title="下载文本">
                            <i class="fas fa-download"></i>
                        </button>
                        <button id="clearBtn" class="action-btn" title="清除文本">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                <div id="transcript" class="transcript"></div>
            </div>
        </main>

        <footer>
            <p>使用 Web Speech API 实现 | <a href="https://github.com/yourusername/speech-to-text-tool" target="_blank">GitHub仓库</a></p>
        </footer>
    </div>

    <div id="notification" class="notification">
        <span id="notificationMessage"></span>
    </div>

    <script src="script.js"></script>
</body>
</html> 